<template>
  <div>
    <header>
      <el-col :span="12">
        <div class="header_one_text1">{{ $t("home.Welcome") }}</div>
        <div class="header_one_text2">{{ $t("home.New") }}</div>
        <div class="header_one_text3">{{ $t("home.life") }}</div>
      </el-col>
      <el-col :span="12" class="header_two">
        <img :src="require('@/assets/imgs/omc/banner.png')" alt="" />
      </el-col>
    </header>
    <aside>
      <el-col :span="12">
        <div class="aside_one">{{ $t("home.Oriental") }}</div>
      </el-col>
      <el-col :span="12">
        <img
          class="aside_img1"
          :src="require('@/assets/imgs/omc/pic1.png')"
          alt=""
        />
      </el-col>
      <el-col :span="14">
        <div class="aside_two">{{ $t("home.Orientals") }}</div>
        <a
          class="aside_a"
          href="http://omcexplorer.net/omcexplorer/main.asp"
          target="_block"
          >http://omcexplorer.net/omcexplorer/main.asp</a
        >
      </el-col>
      <el-col :span="10">
        <img
          class="aside_img2"
          :src="require('@/assets/imgs/omc/pic2.png')"
          alt=""
        />
      </el-col>
    </aside>
    <div class="asideq">
      <ul>
        <li>{{ $t("home.Browser") }}</li>
        <li>{{ $t("home.Orient") }}</li>
        <li>{{ $t("home.WEB") }}</li>
      </ul>
    </div>
    <div class="asidew">
      <div class="asidew_one asidew_common">
        <img :src="require('@/assets/imgs/omc/pic3.png')" alt="" />
        <div>{{ $t("home.OOLBAR") }}</div>
        <div>{{ $t("home.TOOLBAR") }}</div>
      </div>
      <div class="asidew_two asidew_common">
        <img :src="require('@/assets/imgs/omc/pic4.png')" alt="" />
        <div>{{ $t("home.Crypto") }}</div>
        <div>{{ $t("home.DEFI") }}</div>
      </div>
      <div class="asidew_three asidew_common">
        <img :src="require('@/assets/imgs/omc/pic5.png')" alt="" />
        <div>{{ $t("home.DEFIexchange") }}</div>
        <div>{{ $t("home.DEFI") }}</div>
      </div>
      <div class="asidew_four asidew_common">
        <img :src="require('@/assets/imgs/omc/pic6.png')" alt="" />
        <div>{{ $t("home.OTCexchange") }}</div>
        <div>{{ $t("home.OTCexchanges") }}</div>
      </div>
      <div class="asidew_five asidew_common">
        <img :src="require('@/assets/imgs/omc/pic7.png')" alt="" />
        <div>{{ $t("home.GAMEToolbar") }}</div>
        <div>{{ $t("home.GAMEToolbars") }}</div>
      </div>
      <div class="asidew_six asidew_common">
        <div>{{ $t("home.OTCexchange") }}</div>
        <div>{{ $t("home.exchange") }}</div>
      </div>
      <div class="asidew_seven asidew_common">
        <img :src="require('@/assets/imgs/omc/pic8.png')" alt="" />
        <div>{{ $t("home.Toolbar") }}</div>
        <div>{{ $t("home.Provided") }}</div>
      </div>
      <div class="asidew_eight asidew_common">
        <img :src="require('@/assets/imgs/omc/pic9.png')" alt="" />
      </div>
    </div>
    <div class="asidee">
      <div>{{ $t("home.Project") }}</div>
    </div>
    <div class="asider">
      <div class="asider_one">
        <img :src="require('@/assets/imgs/omc/pic8.png')" alt="" />
        <div class="asider_one_span"></div>
        <div class="asider_one_div">
          <div class="div_one">{{ $t("home.platform") }}</div>
          <div class="div_two">{{ $t("home.file") }}</div>
          <div class="div_one">{{ $t("home.service") }}</div>
          <div class="div_two">{{ $t("home.transaction") }}</div>
          <div class="div_one">{{ $t("home.Blockchain") }}</div>
          <div class="div_two">{{ $t("home.solutions") }}</div>
          <div class="div_one">{{ $t("home.Build") }}</div>
          <div class="div_two">{{ $t("home.thereafter") }}</div>
          <div class="div_one">{{ $t("home.check") }}</div>
          <div class="div_two">{{ $t("home.system") }}</div>
          <div class="div_one">{{ $t("home.Interworking") }}</div>
          <div class="div_two">{{ $t("home.management") }}</div>
        </div>
      </div>
    </div>
    <div class="asidet">
      <img
        class="asidet_img1"
        :src="require('@/assets/imgs/omc/pic11.png')"
        alt=""
      />
      <div class="asidet_text1">{{ $t("home.Procedures") }}</div>
      <ul class="asidet_text2">
        <li>
          <img
            class="asidet_img2"
            :src="require('@/assets/imgs/omc/Icon1.png')"
            alt=""
          />
          <span class="asidet_span1 asidet_text">{{ $t("home.Join") }}</span>
        </li>
        <li>
          <img
            class="asidet_img3"
            :src="require('@/assets/imgs/omc/Icon2.png')"
            alt=""
          />
          <span class="asidet_span1 asidet_text">{{
            $t("home.creation")
          }}</span>
        </li>
        <li>
          <img
            class="asidet_img4"
            :src="require('@/assets/imgs/omc/Icon3.png')"
            alt=""
          />
          <span class="asidet_span1 asidet_text">{{ $t("home.OAuth") }}</span>
        </li>
        <li>
          <img
            class="asidet_img5"
            :src="require('@/assets/imgs/omc/Icon4.png')"
            alt=""
          />
          <span class="asidet_span1 asidet_text">{{
            $t("home.Authenticity")
          }}</span>
        </li>
        <li>
          <img
            class="asidet_img6"
            :src="require('@/assets/imgs/omc/Icon5.png')"
            alt=""
          />
          <span class="asidet_span1 asidet_text">{{
            $t("home.document")
          }}</span>
        </li>
        <li>
          <img
            class="asidet_img7"
            :src="require('@/assets/imgs/omc/Icon6.png')"
            alt=""
          />
          <span class="asidet_span1 asidet_text">{{
            $t("home.authenticity")
          }}</span>
        </li>
      </ul>
      <div class="asidet_texts1">{{ $t("home.price") }}</div>
      <div class="asidet_col"></div>
      <div class="asidet_texts2">{{ $t("home.original") }}</div>
    </div>
    <div class="asidey">
      <div class="asidey_span"></div>
      <el-row>
        <el-col :span="12">
          <div class="asidey_text1">{{ $t("home.OrientalCoin") }}</div>
          <div class="asidey_text2">{{ $t("home.Download") }}</div>
          <ul class="asidey_ul">
            <li>
              <img class="imgsss" :src="dataList.windows_img" alt="" />
            </li>
            <li>
              <img class="imgsss" :src="dataList.android_img" alt="" />
            </li>
            <li>
              <img class="imgsss" :src="dataList.ios_img" alt="" />
            </li>
          </ul>
          <ul class="asidey_ul1">
            <li>
              <span>{{ $t("home.APK") }}</span>
            </li>
            <li>
              <span>{{ $t("home.Androidso") }}</span>
            </li>
            <li>
              <span>{{ $t("home.URL") }}</span>
            </li>
          </ul>
          <ul class="asidey_ul2">
            <li>{{ $t("home.APK") }}</li>
            <li>{{ $t("home.omcwallet") }}</li>
          </ul>
          <div class="asidey_text3">{{ $t("home.Android") }}</div>
          <div class="asidey_text4">
            <a
              target="_black"
              href="https://play.google.com/store/apps/details?id=com.hustay.swing.deb97f8351e0d4c61aa18cf4030af866b&hl=ko&gl=US"
              >{{
                "https://play.google.com/store/apps/details?id=com.hustay.swing.deb97f8351e0d4c61aa18cf4030af866b&hl=ko&gl=US"
              }}</a
            >
          </div>
          <div class="asidey_text5">{{ $t("home.Wallet") }}</div>
          <div class="asidey_text4">
            <a
              target="_black"
              href="https://omcwallet.net/m_en/main/index.html"
              >{{ "https://omcwallet.net/m_en/main/index.html" }}</a
            >
          </div>
        </el-col>
        <el-col :span="12"
          ><img
            class="asidey_imgs1"
            style="width: 105px; height: 97px"
            :src="require('@/assets/imgs/omc/huli.png')"
            alt=""
          />
          <div class="asidey_spans1">{{ $t("home.store") }}</div>
          <img class="asidey_imgso1" :src="dataList.google_play_img" alt="" />
          <div class="asidey_texts2">
            <a
              target="_black"
              href="https://play.google.com/store/apps/details?id=io.metamask&hl=en"
              >{{
                "https://play.google.com/store/apps/details?id=io.metamask&hl=en"
              }}</a
            >
          </div>
          <div class="asidey_spans2">{{ $t("home.Masks") }}</div>
          <div class="asidey_spans3">{{ $t("home.Wallest") }}</div>
        </el-col>
      </el-row>
    </div>
    <div class="asideu">
      <el-row>
        <div class="asideu_div"></div>
        <el-col :span="12"
          ><div class="asideu_text">{{ $t("home.MarketingCommunity") }}</div>
          <div class="asideu_text2">{{ htmls }}</div>
        </el-col>
        <el-col :span="12">
          <div class="asideu_text1">{{ $t("home.MiningCommunity") }}</div>
          <div class="asideu_text2">{{ $t("home.cryptocurrency") }}</div>
          <div class="asideu_text3">{{ $t("home.educational") }}</div>
          <ul class="asideu_text4">
            <li>{{ $t("home.Androids") }}</li>
            <li>{{ $t("home.CKMIOSUR") }}</li>
          </ul>
          <ul class="asideu_text5">
            <li><img :src="dataList.android_phone_img" alt="" /></li>
            <li>
              <img :src="dataList.ckm_ios_img" alt="" />
            </li>
          </ul>
          <ul class="asideu_text6">
            <li>
              <a
                href="http://www.ckmmining.com/uploads/image/20220304/1646383577.apk"
                >{{
                  "http://www.ckmmining.com/uploads/image/20220304/1646383577.apk"
                }}</a
              >
            </li>
            <li>{{ "ios.ckmmining.com" }}</li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <div class="asidei">
      <div class="asidei_text">{{ $t("home.mining") }}</div>
      <div class="asidei_text1">{{ $t("home.hour") }}</div>
      <img
        class="asidei_image1"
        :src="require('@/assets/imgs/omc/vip.png')"
        alt=""
      />
      <div class="asidei_text2">{{ $t("home.Caution") }}</div>
      <div class="asidei_text3">{{ $t("home.Participants") }}</div>
      <img
        class="asidei_image2"
        :src="require('@/assets/imgs/omc/Partners.png')"
        alt=""
      />
    </div>
    <div class="asideo">
      <div class="asideo_text">
        {{ "Copyright © 2022, Oriental Community Center" }}
      </div>
    </div>
  </div>
</template>

<script>
import { code, introduce } from "@/api/omc.js"; // 二维码 介绍
export default {
  name: "omc",
  data() {
    return {
      dataList: {}, //二维码列表
      htmls: "", // 介绍详情
    };
  },
  created() {
    this.code();
    this.introduce();
  },
  methods: {
    // 重置接口
    async code(query) {
      try {
        const data = await code(query);
        this.dataList = data.data;
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
    // 介绍详情
    async introduce(query) {
      try {
        const data = await introduce(query);
        this.htmls = data.data.content;
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped>
header {
  overflow: hidden;
  box-sizing: border-box;
  width: 1920px;
  height: 922px;
  background: #050825;
}

.header_two img {
  margin-top: 72px;
  width: 815px;
  height: 658px;
}
.header_one_text1 {
  margin: 157px 0 0 205px;
  width: 650px;
  height: 176px;
  font-size: 70px;
  font-family: Arial;
  font-weight: 400;
  color: #ffffff;
  line-height: 110px;
}
.header_one_text2 {
  margin: 54px 0 0 207px;
  width: 699px;
  height: 85px;
  font-size: 26px;
  font-family: Arial;
  font-weight: 400;
  color: #ffffff;
  line-height: 48px;
}
.header_one_text3 {
  margin: 20px 0 0 207px;
  width: 699px;
  height: 85px;
  font-size: 26px;
  font-family: Arial;
  font-weight: 400;
  color: #ffffff;
  line-height: 48px;
}
aside {
  width: 1920px;
  height: 1100px;
}
.aside_one {
  margin: 91px 0 0 162px;
  width: 806px;
  height: 513px;
  font-size: 34px;
  font-family: Arial;
  font-weight: 400;
  color: #666666;
  line-height: 48px;
}
.aside_img1 {
  margin: 48px 82px 0 80px;
  width: 650px;
  height: 412px;
}
.aside_img2 {
  margin: -80px 0 0 0;
  width: 638px;
  height: 445px;
}
.aside_two {
  margin: 59px 0 0 153px;
  width: 905px;
  height: 200px;
  font-size: 60px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 60px;
}
.aside_a {
  width: 300px;
  height: 50px;
  display: inline-block;
  margin: 10px 0 0 157px;
  color: #050825;
}
.asideq {
  box-sizing: border-box;
  overflow: hidden;
  width: 1920px;
  height: 1080px;
  background: url("~@/assets/imgs/omc/bg2.png") no-repeat;
  background-size: 100% 100%;
}
.asideq ul :nth-child(1) {
  margin: 181px 0 0 207px;
  width: 730px;
  height: 53px;
  font-size: 70px;
  font-family: Arial;
  font-weight: bold;
  color: #ffffff;
  line-height: 100px;
}
.asideq ul :nth-child(2) {
  margin: 65px 0 0 183px;
  width: 695px;
  height: 71px;
  font-size: 24px;
  font-family: Arial;
  font-weight: 400;
  color: #ffffff;
  line-height: 48px;
}
.asideq ul :nth-child(3) {
  margin: 339px 0 0 190px;
  width: 553px;
  height: 53px;
  font-size: 70px;
  font-family: Arial;
  font-weight: bold;
  color: #ffffff;
  line-height: 100px;
}
.asidew {
  width: 1920px;
  overflow: hidden;
  box-sizing: border-box;
  background: #f6f6f6;
}
.asidew .asidew_common {
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 852px;
  height: 426px;
  background: #ffffff;
}
.asidew .asidew_one,
.asidew_three,
.asidew_five,
.asidew_seven {
  margin-left: 108px;
}
.asidew .asidew_one,
.asidew_two {
  margin-top: 108px;
}
.asidew .asidew_two,
.asidew_four,
.asidew_six,
.asidew_eight {
  margin: 0 50px 0 22px;
}
.asidew .asidew_two,
.asidew_three,
.asidew_five,
.asidew_seven,
.asidew_four,
.asidew_six,
.asidew_eight {
  margin-top: 27px;
}
.asidew .asidew_seven,
.asidew_eight {
  margin-bottom: 133px;
}
.asidew_one img {
  position: absolute;
  top: 61px;
  left: 56px;
  width: 394px;
  height: 296px;
}
.asidew_one :nth-child(2) {
  position: absolute;
  top: 100px;
  right: 116px;
  width: 245px;
  height: 54px;
  font-size: 72px;
  font-family: Arial;
  font-weight: 400;
  color: #bebebe;
  line-height: 100px;
}
.asidew_one :nth-child(3) {
  position: absolute;
  top: 200px;
  right: 76px;
  width: 282px;
  height: 29px;
  font-size: 36px;
  font-family: Arial;
  font-weight: bold;
  color: #00b0f0;
  line-height: 100px;
}
.asidew_two :nth-child(1) {
  position: absolute;
  top: 47px;
  left: 40px;
  width: 473px;
  height: 317px;
}
.asidew_two :nth-child(2) {
  position: absolute;
  top: 63px;
  right: 107px;
  width: 210px;
  height: 23px;
  font-size: 24px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 100px;
}
.asidew_two :nth-child(3) {
  position: absolute;
  top: 145px;
  right: 55px;
  width: 254px;
  height: 163px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 30px;
}
.asidew_three :nth-child(1) {
  position: absolute;
  top: 47px;
  left: 60px;
  width: 473px;
  height: 317px;
}
.asidew_three :nth-child(2) {
  position: absolute;
  top: 63px;
  right: 107px;
  width: 210px;
  height: 23px;
  font-size: 24px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 100px;
}
.asidew_three :nth-child(3) {
  position: absolute;
  top: 145px;
  right: 55px;
  width: 254px;
  height: 163px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 30px;
}
.asidew_four :nth-child(1) {
  position: absolute;
  top: 29px;
  left: 38px;
  width: 475px;
  height: 317px;
}
.asidew_four :nth-child(2) {
  position: absolute;
  top: 60px;
  right: 107px;
  width: 210px;
  height: 23px;
  font-size: 24px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 100px;
}
.asidew_four :nth-child(3) {
  position: absolute;
  top: 150px;
  right: 55px;
  width: 254px;
  height: 163px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 30px;
}
.asidew_five :nth-child(1) {
  position: absolute;
  top: 85px;
  left: 59px;
  width: 396px;
  height: 266px;
}
.asidew_five :nth-child(2) {
  position: absolute;
  top: 40px;
  right: 107px;
  width: 210px;
  height: 23px;
  font-size: 24px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 100px;
}
.asidew_five :nth-child(3) {
  position: absolute;
  top: 120px;
  right: 55px;
  width: 254px;
  height: 163px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 30px;
}
.asidew_six :nth-child(1) {
  position: absolute;
  top: 40px;
  left: 63px;
  width: 190px;
  height: 23px;
  font-size: 24px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 100px;
}
.asidew_six :nth-child(2) {
  position: absolute;
  top: 120px;
  left: 63px;
  width: 732px;
  height: 256px;
  font-size: 16px;
  font-family: Arial;
  font-weight: 400;
  color: #666666;
  line-height: 30px;
}
.asidew_seven :nth-child(1) {
  position: absolute;
  top: 56px;
  left: 74px;
  width: 381px;
  height: 258px;
}
.asidew_seven :nth-child(2) {
  position: absolute;
  top: 50px;
  right: 93px;
  width: 261px;
  height: 18px;
  font-size: 24px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 100px;
}
.asidew_seven :nth-child(3) {
  position: absolute;
  top: 124px;
  right: 95px;
  width: 225px;
  height: 256px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 30px;
}
.asidew_eight :nth-child(1) {
  position: absolute;
  top: 118px;
  left: 57px;
  width: 728px;
  height: 192px;
}
.asidee {
  position: relative;
  box-sizing: border-box;
  width: 1920px;
  height: 1080px;
  background: url("~@/assets/imgs/omc/bg3.png") no-repeat;
  background-size: 100% 100%;
}
.asidee :nth-child(1) {
  position: absolute;
  left: 121px;
  bottom: 111px;
  width: 991px;
  height: 105px;
  font-size: 110px;
  font-family: Arial;
  font-weight: bold;
  color: #ffffff;
  line-height: 100px;
}
.asider {
  overflow: hidden;
  box-sizing: border-box;
  width: 1920px;
  height: 1080px;
  background: #f6f6f6;
}
.asider_one {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  margin: 55px 3%;
  width: 94%;
  height: 970px;
  background: #ffffff;
}
.asider_one img {
  position: absolute;
  top: 224px;
  left: 53px;
  width: 671px;
  height: 456px;
}
.asider_one .asider_one_span {
  position: absolute;
  top: 116px;
  left: 788px;
  width: 2px;
  height: 719px;
  background: #000000;
  border: 1px solid #666666;
}
.asider_one .asider_one_div {
  box-sizing: border-box;
  overflow: hidden;
  width: 50%;
  height: 100%;
  margin: 0 0 0 50%;
}
.asider_one .asider_one_div :nth-child(1) {
  margin-top: 100px !important;
  font-size: 20px !important;
}
.asider_one .asider_one_div .div_one {
  margin-top: 40px;
  padding-left: 36px !important;
  font-weight: 500;
  color: #000000;
  font-size: 20px !important;
}
.asider_one .asider_one_div .div_two {
  width: 90%;
  margin-top: 20px;
  padding-left: 36px !important;
  color: #666666;
  font-size: 14px !important;
}
.asidet {
  width: 1920px;
  height: 1080px;
  background: #ffffff;
}
.asidet .asidet_img1 {
  margin: 72px 0 0 15%;
  width: 70%;
  height: 403px;
}
.asidet_text1 {
  margin: 0 0 0 15%;
  width: 70%;
  height: 48px;
  font-size: 50px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 86px;
}
.asidet_text2 {
  display: inline-block;
  padding: 57px 0 0 310px;
}
.asidet_text2 li {
  display: inline-block;
  margin-right: 96px;
}
.asidet_text2 li span {
  margin-top: 42px;
}
.asidet_img2 {
  width: 121px;
  height: 91px;
}
.asidet_text {
  display: block;
  width: 160px;
  height: 42px;
  font-size: 18px;
  font-family: Arial;
  font-weight: 400;
  color: #666666;
  line-height: 28px;
}
.asidet_texts1 {
  margin: 51px 0 0 300px;
  width: 472px;
  height: 35px;
  display: inline-block;
  font-size: 36px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 100px;
}
.asidet_col {
  width: 1px;
  margin: 10px 30px 0;
  display: inline-block;
  height: 72px;
  background: #00b0f0;
  border: 1px solid #bfbfbf;
}
.asidet_texts2 {
  display: inline-block;
  width: 794px;
  height: 93px;
  font-size: 20px;
  font-family: Arial;
  font-weight: 400;
  color: #666666;
  line-height: 36px;
}
.asidey {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: #f6f6f6;
}
.asidey_text1 {
  margin: 123px 0 0 183px;
  width: 552px;
  height: 57px;
  font-size: 60px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 86px;
}
.asidey_text2 {
  margin: 36px 0 0 183px;
  width: 531px;
  height: 38px;
  font-size: 48px;
  font-family: Arial;
  font-weight: 400;
  color: #666666;
  line-height: 36px;
}
.asidey_span {
  position: absolute;
  top: 100px;
  left: 1032px;
  width: 2px;
  height: 880px;
  background: #000000;
  border: 1px solid #bfbfbf;
}
.asidey_ul {
  margin: 75px 0 0 184px;
}
.asidey_ul li {
  margin: 0 5px;
  display: inline-block;
}
.asidey_ul1 {
  margin: 29px 0 0 183px;
}
.asidey_ul1 li {
  display: inline-block;
}
.asidey_ul1 li span {
  margin: 0 50px;
  text-align: center;
  width: 138px;
  height: 14px;
  font-size: 18px;
  font-family: Arial;
  font-weight: 400;
  color: #666666;
  line-height: 28px;
}
.asidey_ul2 {
  margin: 64px 0 0 184px;
}
.asidey_ul2 li {
  display: inline-block;
}
.asidey_ul2 :nth-child(1) {
  width: 187px;
  height: 17px;
  font-size: 22px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 28px;
}
.asidey_ul2 :nth-child(2) {
  width: 229px;
  height: 17px;
  font-size: 18px;
  font-family: Arial;
  font-weight: 400;
  color: #00b0f0;
  line-height: 28px;
}
.asidey_text3 {
  margin: 55px 0 0 184px;
  width: 275px;
  height: 22px;
  font-size: 22px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 28px;
}
.asidey_text4 {
  margin: 21px 0 0 184px;
  width: 513px;
  height: 46px;
  font-size: 18px;
  font-family: Arial;
  font-weight: 400;
  color: #00b0f0;
  line-height: 28px;
}
.asidey_text5 {
  margin: 43px 0 0 184px;
  width: 217px;
  height: 17px;
  font-size: 22px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 28px;
}
.asidey_imgs1 {
  margin: 167px 0 0 185px;
}
.asidey_spans1 {
  margin: 34px 0 0 137px;
  width: 303px;
  height: 18px;
  font-size: 18px;
  font-family: Arial;
  font-weight: 400;
  color: #666666;
  line-height: 28px;
}
.asidey_imgso1 {
  width: 202px;
  height: 202px;
  margin: 40px 0 0 136px;
}
.asidey_texts2 {
  margin: 26px 0 0 136px;
  width: 822px;
  height: 18px;
  font-size: 18px;
  font-family: Arial;
  font-weight: 400;
  color: #00b0f0;
  line-height: 28px;
}
.asidey_spans2 {
  margin: 76px 0 0 136px;
  width: 380px;
  height: 23px;
  font-size: 30px;
  font-family: Arial;
  font-weight: 400;
  color: #999999;
  line-height: 36px;
}
.asidey_spans3 {
  margin: 35px 0 0 136px;
  width: 607px;
  height: 165px;
  font-size: 24px;
  font-family: Arial;
  font-weight: 400;
  color: #999999;
  line-height: 36px;
}
.asideu {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: #050825;
}
.asideu_text {
  margin: 119px 0 0 181px;
  width: 626px;
  height: 57px;
  font-size: 60px;
  font-family: Arial;
  font-weight: bold;
  color: #ffffff;
  line-height: 86px;
}
.asideu_div {
  position: absolute;
  top: 100px;
  left: 959px;
  width: 2px;
  height: 880px;
  background: #bfbfbf;
}
.asideu_text1 {
  margin: 119px 0 0 74px;
  width: 536px;
  height: 57px;
  font-size: 60px;
  font-family: Arial;
  font-weight: bold;
  color: #ffffff;
  line-height: 86px;
}
.asideu_text2 {
  margin: 34px 0 0 74px;
  width: 676px;
  font-size: 24px;
  font-family: Arial;
  font-weight: 400;
  color: #ffffff;
  line-height: 36px;
}
.asideu_text3 {
  margin: 0 0 0 74px;
  width: 676px;
  font-size: 24px;
  font-family: Arial;
  font-weight: 400;
  color: #ffffff;
  line-height: 36px;
}
.asideu_text4 {
  margin: 64px 0 0 74px;
}
.asideu_text4 li {
  display: inline-block;
  margin-right: 120px;
  width: 286px;
  height: 28px;
  font-size: 30px;
  font-family: Arial;
  font-weight: bold;
  color: #ffffff;
  line-height: 86px;
}
.asideu_text5 li {
  margin: 24px 0 0 84px;
  display: inline-block;
}
.asideu_text5 li img {
  width: 262px;
  height: 262px;
}
.asideu_text6 {
  margin: 41px 0 0 74px;
}
.asideu_text6 li {
  width: 341px;
  font-size: 18px;
  font-family: Arial;
  font-weight: 400;
  color: #00b0f0;
  line-height: 28px;
}
.asideu_text6 li a {
  font-size: 18px;
  font-family: Arial;
  font-weight: 400;
  color: #00b0f0;
  line-height: 28px;
}
.asidei {
  width: 1920px;
}
.asidei_text {
  margin: 114px 0 0 183px;
  width: 1516px;
  height: 146px;
  font-size: 70px;
  font-family: Arial;
  font-weight: bold;
  color: #666666;
  line-height: 80px;
}
.asidei_text1 {
  margin: 30px 0 0 1577px;
  width: 156px;
  height: 24px;
  font-size: 24px;
  font-family: Arial;
  font-weight: bold;
  color: #2a3b5c;
  line-height: 36px;
}
.asidei_image1 {
  margin: 26px 0 0 182px;
  width: 1556px;
  height: 370px;
}
.asidei_text2 {
  margin: 50px 0 0 232px;
  width: 590px;
  font-size: 24px;
  font-family: Arial;
  font-weight: bold;
  color: #0042fe;
  line-height: 36px;
}
.asidei_text3 {
  margin: 0 0 0 232px;
  width: 790px;
  font-size: 24px;
  font-family: Arial;
  font-weight: bold;
  color: #0042fe;
  line-height: 36px;
}
.asidei_image2 {
  margin: 100px 0 23px 556px;
  width: 811px;
  height: 54px;
}
.asideo {
  width: 1919px;
  height: 80px;
  background: #eeeeee;
}
.asideo_text {
  margin: 0 auto;
  width: 713px;
  height: 24px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #808080;
  line-height: 80px;
}
.imgsss {
  width: 240px;
  height: 240px;
}
</style>